<template>
  <div>
    <div>
      <el-button type="primary" @click="dialogVisibles=true">增加角色</el-button>
    </div>
    <div>
      <el-table :data="AllRoleList" stripe style="width: 200%" class="role-container">
        <el-table-column prop="name" label="登录角色名" width="260"></el-table-column>
        <el-table-column prop="nameZh" label="登录姓名" width="260"></el-table-column>

        <el-table-column label="操作" width="600">
          <template slot-scope="scope">
            <el-button type="primary" @click="showMenu(scope.row.id)">授权</el-button>
            <el-button type="primary" @click="getUserByRid(scope.row)">查看拥有该角色的人员</el-button>
            <el-button type="primary" @click="passThis(scope.row)">查看拥有该角色的菜单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @current-change="restRole"
        background
        :current-page="AllRolePageInfo.current"
        :page-count="AllRolePageInfo.pages"
      ></el-pagination>
    </div>

    <!-- -----------------------------增加角色--------------------------------------- -->
    <div>
      <el-dialog title="提示" :visible.sync="dialogVisibles" width="30%">
        <el-form :model="roleList" ref="roleList" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称">
            <el-input v-model="roleList.name"></el-input>
          </el-form-item>

          <el-form-item label="名称">
            <el-input v-model="roleList.nameZh"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="doUpRole">取 消</el-button>
          <el-button type="primary" @click="doAddRole">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="授权" :visible.sync="dialogVisible" width="40%">
        <el-tree
          :data="RoleMenuList"
          :default-checked-keys="MenuIds"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          ref="tree"
          highlight-current
        ></el-tree>

        <span slot="footer" class="dialog-footer">
          <el-button @click="upDialogVisible">取 消</el-button>
          <el-button type="primary" @click="btnDialogVisible">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
var vueData = {
  AllRoleList: [],
  AllRolePageInfo: {},
  RoleMenuList: [],
  dialogVisible: false,
  MenuIds: [],
  defaultProps: {
    children: "menuList",
    label: "name"
  },
  rid: "",
  dialogVisibles: false,
  roleList: {}
};

export default {
  data() {
    return vueData;
  },
  mounted: function() {
    this.restRole();
  },
  methods: {
    restRole: function(p) {
      var wmh = this;
      var page = 0;
      wmh.dialogVisibleb = true;
      if (p != undefined && p != null && p > 0) {
        page = p;
      }
      wmh
        .$ajax({
          url:
            "http://localhost:8081/role/page?pageNum=" + page + "&pageSize=5",
          method: "get"
        })
        .then(function(res) {
          if (res.data.code == 200) {
            wmh.AllRolePageInfo = res.data.object;
            wmh.AllRoleList = res.data.object.records;
          }
        });
    },
    doAddRole: function() {
      var wmh = this;
      wmh.dialogVisibles = true;

      wmh
        .$ajax({
          url: "http://localhost:8081/role/addRole",
          method: "post",
          params: wmh.roleList
        })
        .then(function(arr) {
          if (arr.data.code == 200) {
            alert("成功");
            wmh.restRole(1);
          } else {
            alert("失败");
          }
        });
    },
    getUserByRid: function() {},
    showMenu: function(rid) {
      var wmh = this;
      wmh.rid = rid;
      wmh
        .$ajax({
          url: "http://localhost:8081/role/getMenuRoleByRid?id=" + rid,
          method: "get"
        })
        .then(function(obj) {
          if (obj.data.code == 200) {
            for (var i = 0; i < obj.data.object.length; i++) {
              wmh.MenuIds.push(obj.data.object[i].mid);
            }
          }
        });
      wmh
        .$ajax({
          url: "http://localhost:8081/role/selectByMenu",
          method: "get"
        })
        .then(function(arr) {
          if (arr.data.code == 200) {
            wmh.RoleMenuList = arr.data.object;
          }
        });
      wmh.dialogVisible = true;
    },
    btnDialogVisible: function() {
      var mids = new Array();

      var wmh = this;
      for (var i = 0; i < wmh.$refs.tree.getCheckedNodes().length; i++) {
        mids.push(wmh.$refs.tree.getCheckedNodes()[i].id);
      }

      wmh
        .$ajax({
          url:
            "http://localhost:8081/role/setRoleByMenu?id=" +
            wmh.rid +
            "&mids=" +
            mids,
          method: "get"
        })
        .then(function(obj) {
          if (obj.data.code == 200) {
            alert("成功");
            wmh.showMenu(wmh.rid);
          } else {
            alert("失败");
          }
        });
    },
    upDialogVisible: function() {
      this.$refs.tree.setCheckedKeys([]);
      this.dialogVisible = false;
      this.MenuIds = [];
      this.rid = "";
    },
    doUpRole:function(){
      this.roleList={};
      this.dialogVisibles=false;
    }
  }
};
</script>

<style>
.role-container {
    opacity: .6;
  }
</style>